<style lang="scss" >
.z-my-page__left {
  height: var(--z-my-page-height);
}
.z-my-page__right {
  height: var(--z-my-page-height);
}
.z-my-page {
  --z-my-page-body-bg: #fff;
  --z-my-page-height: 85vh;
  --z-my-page-tongji-con: 110px;
  --z-my-page-body-h: calc(var(--z-my-page-height) - var(--z-my-page-tongji-con) );
  background-color: #efefef;
  padding: 14px;
  box-sizing: border-box;
  .z-crud-table__actions {
    display: none;
  }
  .z-my-page__center {
    background-color: var( --z-my-page-body-bg);
  }
  .z-my-page__right {
    //background-color: var( --z-my-page-body-bg);
  }
  .z-table {
    background-color: transparent;
  }
  .z-my-page__body {
    padding: 20px;
    box-sizing: border-box;
  }
}
.z-my-page__tongji-con {
  height: var(--z-my-page-tongji-con);
}
.z-my-page__body {
  height: var(--z-my-page-body-h);
  .z-search-table__content {
    --z-search-table__content-h: calc(var(--z-my-page-body-h ) - var(--z-crud-table__actions-height));
    height: var(--z-search-table__content-h);
    overflow: auto;
  }
  [mode='default'] {
    .z-table {
      height: var(--z-search-table__content-h) !important;
    }
  }
  .z-crud-grid-view {
    height: calc(var(--z-search-table__content-h) - 56px) ;
    overflow: auto;
  }
  .z-table__container {
  }
}

</style>

<template>
  <div class="z-my-page" >
    <zw-row :gutter="20" >
      <zw-col :span="5" class="z-my-page__left"  @click="ZS_DEBUG('tree')">
        <z-tree :data="state.treeData"
                @node-click="handleNodeClick"
                :right-menu="obj.treeOption.rightMenu"
        ></z-tree>
      </zw-col>
      <zw-col :span="14" class="z-my-page__center" >
        <div class="z-my-page__body">
          <z-crud-table
              :request="obj.request"
              :add-com="obj.EditCom"
              :detail-com="obj.DetailCom"
              :edit-com="obj.EditCom"
              :obj="obj.tableOption"
              :on-init="onCurdInit"
              :on-edit="onCurdEdit"
              :on-delete="onCurdDelete"
              @click.native="ZS_DEBUG('table')"
              default-mode="ZComGridView"
              v-if="obj.request && state.reloadMap.table"
          >
            <template #z-crud-table__table__content_beforeform="scope">
              <div>我的课程</div>
            </template>
            <template #content="scope">
              <slot name="list_item_content" v-bind="scope"></slot>
            </template>
          </z-crud-table>
        </div>
      </zw-col>
      <zw-col :span="5" class="z-my-page__right" >
        <div>热门课程</div>
      </zw-col>
    </zw-row>
  </div>
</template>

<script>
import {ZPageMixin} from "./ZPageMixin";
import {createPageTool} from "./hooks";

export default {
  name: "ZMyPage",
  mixins: [
    ZPageMixin
  ],
  props: {
    obj: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  setup(props, outerCtx) {
    // console.log(outerCtx.root.$message)

    const {onMounted, inject, watch} = window.vueCompositionAPI

    let pageTool = createPageTool();
    let ZS_DEBUG = pageTool.ZS_DEBUG;

    let tableCtx;
    let obj = props.obj;
    let objDeepClone = ZY.lodash.cloneDeep(obj)


    if (!obj) {
      console.error('BUG')
    }

    if (!obj.tableOption) {
      obj.tableOption = {}
    }

    if (!obj.request) {
      obj.request = window.Req
    }

    function onCurdInit(ctx) {
      tableCtx = ctx
    }

    let state = ZY.T.state({
      treeData: [],
      projectID: '',
      tongji: [],
      reloadMap:{
        tree: true,
        table: true,
        panel: true
      }
    })

    function reloadCom(key) {
      state.reloadMap[key] = false;
      setTimeout(() => {
        state.reloadMap[key] = true;
      }, 300)
    }

    async function reloadTree() {
      let [err, res] = await ZY.awaitTo(
          obj.request.get(obj.treeOption.url))
      state.treeData = res.result.records
    }

    async function reloadTongji() {
      let [err, res] = await ZY.awaitTo(
          obj.request.get(obj.panelOption.url))
      state.tongji = res.result.records
    }

    onMounted( () => {
      //查询左侧项目树
      reloadTree();
      reloadTongji();
    })

    function handleNodeClick(value) {
      // obj.columnDefMap.status = value.id
      tableCtx.table__search({
        params: {
          projectId: value.id
        }
      })
      state.projectID = value.id
    }

    function onCurdEdit(...args) {
      // console.log(args)
      ZELEMENT.Message.success('成功')
      tableCtx.table__search({
        params: {
          projectId: state.projectID
        }
      })
    }

    async function onCurdDelete(ctx) {
      // console.log('onCurdDelete', ctx)
      await ctx.refs.searchTable.search()
      await ZY.sleep(1000)
    }

    function getObj(path, defVal) {
      return ZY.lodash.get(obj, path, defVal)
    }

    watch(props.obj, (newVal) => {
      // console.log('change', newVal.panelOption.url, objDeepClone.panelOption.url)
      let diffed = ZY.diff(objDeepClone, newVal)
      // console.log(diffed)

      objDeepClone = ZY.lodash.cloneDeep(newVal)
      if (diffed.panelOption) {
        reloadTongji();
      }

      if (diffed.treeOption) {
        reloadTree();
      }

      if (diffed.tableOption) {
        let keys = Object.keys(diffed.tableOption)
        if (keys.length === 1 && keys[0] === 'request') {

        } else {
          reloadCom('table')
        }
      }
    }, {
      deep: true
    })


    return { state, onCurdInit, onCurdDelete, onCurdEdit, getObj, ZS_DEBUG, handleNodeClick}
  }
}
</script>


